<template>
  <div class="page">
    <!--顶部数据-->
    <div class="row head between-span">
      <div class="caseMoney">
        <div style="float:left;margin-top:4px;margin-left:20px">
          <div style="text-align:left">
            <span style="color:white;text-align:left;font-size:26px;margin-right:8px;width:50px">{{caseSumMoney6}}</span><span class="white">万元</span>
          </div>
          <div style="color:white;font-size:10px;text-align:left">案件总金额</div>
          <div style="margin-top:6px;">
            <span style="color:white;margin-right:4px;">■</span><span class="white">人均金额，</span><span class="white">{{caseSumAmtPerson6}}万元</span>
          </div>
        </div>
        <div class="iconfont icon-anjianzongjine iconfontType" style="color:#FAA197;"></div>
      </div>

      <div class="backMoney">
        <div style="float:left;margin-top:4px;margin-left:20px">
          <div style="text-align:left">
            <span style="color:white;text-align:left;font-size:26px;margin-right:8px;width:50px">{{repaySumAmt6}}</span><span class="white">万元</span>
          </div>
          <div style="color:white;font-size:10px;text-align:left">回款总金额</div>
          <div style="margin-top:6px;">
            <span style="color:white;margin-right:4px;">■</span><span class="white">人均金额，</span><span class="white">{{repaySumAmtPerson6}}万元</span>
          </div>
        </div>
        <div class="iconfont icon-huikuanzongjine iconfontType" style="color:#90C2CB;"></div>
      </div>

      <div class="debtCollectorNum">
        <div style="float:left;margin-top:4px;margin-left:20px;">
          <div style="text-align:left">
            <span style="color:white;text-align:left;font-size:26px;margin-right:8px;width:50px">{{cupoSum}}</span><span style="color:white;">人</span>
          </div>
          <div style="color:white;font-size:10px;text-align:left">催收员人数</div>
          <div style="margin-top:6px;">
            <span style="color:white;margin-right:4px;">■</span><span class="white">在线人数，</span><span class="white">{{onlineUsers}}人</span>
            <span style="color:white;margin-right:4px;margin-left:6px">■</span><span class="white">离线人数，</span><span class="white">{{cupoSum-onlineUsers}}人</span>
          </div>
        </div>
        <div class="iconfont icon-cuishouyuanrenshu iconfontType" style="color:#F5D7A5;"></div>
      </div>

      <div class="clientNum">
        <div style="float:left;margin-top:4px;margin-left:20px">
          <div style="text-align:left">
            <span style="color:white;text-align:left;font-size:26px;margin-right:8px;width:50px">{{custSum===''?0:custSum}}</span><span class="white">人</span>
          </div>
          <div style="color:white;font-size:10px;text-align:left">客户人数</div>
        </div>
        <div class="iconfont icon-kehurenshu iconfontType" style="color: #90D9BD;"></div>
      </div>
    </div>

    <!--柱状图-->
    <div class="row  histogram">
      <div class="col-span-4 fontFootDiv">
        <IEcharts class="fill" :option="backMoney" :loading="loading" @ready="onReady" @click="onClick"></IEcharts>
        <div class="fontFoot"></div>
      </div>
      <div class="col-span-4 fontFootDiv">
        <IEcharts class="fill" :option="accCount" :loading="loading" @ready="onReady" @click="onClick"></IEcharts>
        <div class="fontFoot"></div>
      </div>
      <div class="col-span-4 fontFootDiv" style="height:250px;width:250px">
        <IEcharts class="fill" :option="caseNum" :loading="loading" @ready="onReady" @click="onClick"></IEcharts>
        <div class="fontFoot"></div>
      </div>
    </div>

    <!--排行榜-->
    <div class="rank between-span">
      <!--催收员排行榜-->
      <div class="debtColRank col-span-4 ">
        <p class="rankText">催收员排行榜</p>
        <div class="textFoot"></div>
        <div class="rankBackground">
          <div class="rankDiv">
            <div class="rankNum1"></div>
            <div class="head-portrait">
              <div class="name">{{cupoSortName1}}</div>
            </div>
            <div class="rankPayed">
              <span>累计回款金额：</span><span>{{cupoSortPayed1}}万元</span>
            </div>
            <div class="rankAmount">
              <span>案件总金额：</span><span>{{cupoSortAmount1}}万元</span>
            </div>
            <div class="rankRate">
              <span>回款率：</span><span>{{cupoSortRate1}}</span>
            </div>
          </div>
          <div class="rankDiv">
            <div class="rankNum2"></div>
            <div class="head-portrait">
              <div class="name">{{cupoSortName2}}</div>
            </div>
            <div class="rankPayed">
              <span>累计回款金额：</span><span>{{cupoSortPayed2}}万元</span>
            </div>
            <div class="rankAmount">
              <span>案件总金额：</span><span>{{cupoSortAmount2}}万元</span>
            </div>
            <div class="rankRate">
              <span>回款率：</span><span>{{cupoSortRate2}}</span>
            </div>
          </div>
          <div class="rankDiv">
            <div class="rankNum3"></div>
            <div class="head-portrait">
              <div class="name">{{cupoSortName3}}</div>
            </div>
            <div class="rankPayed">
              <span>累计回款金额：</span><span>{{cupoSortPayed3}}万元</span>
            </div>
            <div class="rankAmount">
              <span>案件总金额：</span><span>{{cupoSortAmount3}}万元</span>
            </div>
            <div class="rankRate">
              <span>回款率：</span><span>{{cupoSortRate3}}</span>
            </div>
          </div>
        </div>
      </div>

      <!--客户排行榜-->
      <div class="clientRank col-span-4">
        <p class="rankText">客户排行榜</p>
        <div class="textFoot"></div>
        <div class="rankBackground">
          <div class="rankDiv">
            <div class="rankNum1"></div>
            <div class="head-portrait">
              <div class="name">{{custSortName1}}</div>
            </div>
            <div class="rankPayed">
              <span>累计回款金额：</span><span>{{custSortPayed1}}万元</span>
            </div>
            <div class="rankAmount">
              <span>案件总金额：</span><span>{{custSortAmount1}}万元</span>
            </div>
            <div class="rankRate">
              <span>回款率:</span><span>{{custSortRate1}}</span>
            </div>
          </div>
          <div class="rankDiv">
            <div class="rankNum2"></div>
            <div class="head-portrait">
              <div class="name">{{custSortName2}}</div>
            </div>
            <div class="rankPayed">
              <span>累计回款金额：</span><span>{{custSortPayed2}}万元</span>
            </div>
            <div class="rankAmount">
              <span>案件总金额：</span><span>{{custSortAmount2}}万元</span>
            </div>
            <div class="rankRate">
              <span>回款率:</span><span>{{custSortRate2}}</span>
            </div>
          </div>
          <div class="rankDiv">
            <div class="rankNum3"></div>
            <div class="head-portrait">
              <div class="name">{{custSortName3}}</div>
            </div>
            <div class="rankPayed">
              <span>累计回款金额：</span><span>{{custSortPayed3}}万元</span>
            </div>
            <div class="rankAmount">
              <span>案件总金额：</span><span>{{custSortAmount3}}万元</span>
            </div>
            <div class="rankRate">
              <span>回款率:</span><span>{{custSortRate3}}</span>
            </div>
          </div>
        </div>
      </div>

      <!--系统公告-->
      <div class="sysInfo col-span-4">
        <p class="rankText">系统公告</p>
        <div class="textFoot"></div>
        <div class="rankBackground">
          <div class="rankDiv">
            <div class="new"></div>
            <div class="batchStatus">{{title}}</div>
            <div class="batchInfo">
              <span>{{content}}</span>
            </div>
          </div>
          <div class="rankDiv">
            <div class="new"></div>
            <div class="batchStatus">暂无数据</div>
            <div class="batchInfo">
              <span>暂无数据</span>
            </div>
          </div>
          <div class="rankDiv">
            <div class="new"></div>
            <div class="batchStatus">暂无数据</div>
            <div class="batchInfo">
              <span>暂无数据</span>
            </div>
          </div>
        </div>
      </div>
    </div>


  </div>
</template>

<script>
  import IEcharts from 'vue-echarts-v3'
  import servers from '@/config/servers'
  import net from '@/util/net'
  export default {
    name: 'welcome-acc',
    components: { IEcharts },
    props: {},
    data() {
      return {
        server: {
          getHomePageInformation: servers.HomePage.get_homePage_information,
          getOnlineUsers: servers.ReportManage.get_online_users,
          getBatchSysNotice: servers.HomePage.get_batch_sysNotice
        },
        loading: false,
        // 本周回款柱状图
        backMoney: {
          title: {
            text: '本周回款',
            textStyle: {
              color: '#28313E',
              fontFamily: 'MicrosoftYaHei',
              fontWeight: 'normal'
            }
          },
          color: ['#F7786C'],
          tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            top: '25%',
            containLabel: true,
            height: 150
          },
          xAxis: [{
            axisLine: {
              show: false
            },
            type: 'category',
            data: ['1', '2', '3', '4', '5', '6', '7'],
            axisTick: {
              alignWithLabel: true,
              show: false
            }
          }],
          yAxis: [{
            axisLine: {
              show: false
            },
            type: 'value',
            axisTick: {
              show: false
            },
            minInterval: 1
          }, {
            axisLine: {
              show: false
            },
            name: '万元/日',
            type: 'value',
            axisTick: {
              show: false
            },
            minInterval: 1
          }],
          series: [{
            name: '金额',
            type: 'bar',
            barWidth: '60%',
            data: []
          }]
        },
        // 本周催计数柱状图
        accCount: {
          title: {
            text: '本周催计数',
            textStyle: {
              color: '#28313E',
              fontFamily: 'MicrosoftYaHei',
              fontWeight: 'normal'
            }
          },
          color: [' #84D5BC'],
          tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            top: '25%',
            containLabel: true,
            height: 150
          },
          xAxis: [{
            axisLine: {
              show: false
            },
            type: 'category',
            data: ['1', '2', '3', '4', '5', '6', '7'],
            axisTick: {
              alignWithLabel: true,
              show: false
            }
          }],
          yAxis: [{
            axisLine: {
              show: false
            },
            nameLocation: 'end',
            type: 'value',
            axisTick: {
              show: false
            },
            minInterval: 1
          }, {
            axisLine: {
              show: false
            },
            name: '次/日',
            nameLocation: 'end',
            type: 'value',
            axisTick: {
              show: false
            },
            minInterval: 1
          }],
          series: [{
            name: '次数',
            type: 'bar',
            barWidth: '60%',
            data: []
          }]
        },
        // 本周结案数柱状图
        caseNum: {
          title: {
            text: '本周结案数',
            textStyle: {
              color: '#28313E',
              fontFamily: 'MicrosoftYaHei',
              fontWeight: 100
            }
          },
          color: ['#87B7D5'],
          tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            top: '20%',
            containLabel: true,
            height: 150
          },
          xAxis: [{
            axisLine: {
              show: false
            },
            type: 'category',
            data: ['1', '2', '3', '4', '5', '6', '7'],
            axisTick: {
              alignWithLabel: true,
              show: false
            }
          }],
          yAxis: [{
            axisLine: {
              show: false
            },
            nameLocation: 'end',
            type: 'value',
            axisTick: {
              show: false
            },
            minInterval: 1
          }, {
            axisLine: {
              show: false
            },
            name: '个/日',
            nameLocation: 'end',
            type: 'value',
            axisTick: {
              show: false
            },
            minInterval: 1
          }],
          series: [{
            name: '个数',
            type: 'bar',
            barWidth: '60%',
            data: []
          }]
        },
        caseSumAmt: 0,
        onlineUsers: 0,
        cupoSortName1: '暂无数据',
        cupoSortName2: '暂无数据',
        cupoSortName3: '暂无数据',
        custSortName1: '暂无数据',
        custSortName2: '暂无数据',
        custSortName3: '暂无数据',
        cupoSortPayed1: 0,
        cupoSortPayed2: 0,
        cupoSortPayed3: 0,
        title: '暂无数据',
        content: '暂无数据',
        cupoSortRate1: 0,
        cupoSortRate2: 0,
        custSortRate3: 0,
        custSortPayed1: 0,
        custSortPayed2: 0,
        custSortPayed3: 0,
        cupoSortAmount1: 0,
        cupoSortAmount2: 0,
        cupoSortAmount3: 0,
        caseSumAmtPerson: 0,
        repaySumAmt: 0,
        repaySumAmtPerson: 0,
        cupoSum: 0,
        custSum: 0,
        cupoSortRate3: 0,
        custSortAmount1: 0,
        custSortAmount2: 0,
        custSortRate2: 0,
        custSortAmount3: 0,
        custSortRate1: 0
        // custSortAmount1: 0,
        // custSortAmount2: 0,
        // custSortAmount3: 0
      }
    },
    mounted() {
      /**
       * 获取主页各种信息
       */
      net.send({
        server: this.server.getHomePageInformation
      }).then((data) => {
        // 获取案件总金额
        this.caseSumAmt = data.data.caseSumAmt / 10000
        // 获取人均金额
        this.caseSumAmtPerson = data.data.caseSumAmtPerson / 10000
        // 回款总金额
        this.repaySumAmt = data.data.repaySumAmt / 10000
        // 获取人均金额
        this.repaySumAmtPerson = data.data.repaySumAmtPerson / 10000
        // 催收员总人数
        this.cupoSum = data.data.cupoSum
        // 获取客户人数
        this.custSum = data.data.custSum
        // 本周回款柱状图
        this.backMoney.series[0].data = data.data.weekRepayList.map(v => {
          return v.amount / 10000
        })
        // 本周催计数柱状图
        this.accCount.series[0].data = data.data.weekFollList.map(v => {
          return v.num
        })
        // 本周结案数柱状图
        this.caseNum.series[0].data = data.data.weekCaseEndList.map(v => {
          return v.num
        })
        // 催收员排行榜第一名、总金额、回款率
        this.cupoSortName1 = data.data.cupoSortList[0].name
        this.cupoSortAmount1 = this.change6Decimals(data.data.cupoSortList[0].amount / 10000)
        this.cupoSortPayed1 = this.change6Decimals(data.data.cupoSortList[0].payed / 10000)
        this.cupoSortRate1 = this.numToPercent(data.data.cupoSortList[0].rate)
        // 催收员排行榜第二名、总金额、回款率
        this.cupoSortName2 = data.data.cupoSortList[1].name
        this.cupoSortAmount2 = this.change6Decimals(data.data.cupoSortList[1].amount / 10000)
        this.cupoSortPayed2 = this.change6Decimals(data.data.cupoSortList[1].payed / 10000)
        this.cupoSortRate2 = this.numToPercent(data.data.cupoSortList[1].rate)
        // 催收员排行榜第三名、总金额、回款率
        this.cupoSortName3 = data.data.cupoSortList[2].name
        this.cupoSortAmount3 = this.change6Decimals(data.data.cupoSortList[2].amount / 10000)
        this.cupoSortPayed3 = this.change6Decimals(data.data.cupoSortList[2].payed / 10000)
        this.cupoSortRate3 = this.numToPercent(data.data.cupoSortList[2].rate)

        // 客户排行榜第一名、总金额、回款率
        this.custSortName1 = data.data.custSortList[0].name
        this.custSortAmount1 = this.change6Decimals(data.data.custSortList[0].amount / 10000)
        this.custSortPayed1 = this.change6Decimals(data.data.custSortList[0].payed / 10000)
        this.custSortRate1 = this.numToPercent(data.data.custSortList[0].rate)
        // 客户排行榜第二名、总金额、回款率
        this.custSortName2 = data.data.custSortList[1].name
        this.custSortAmount2 = this.change6Decimals(data.data.custSortList[1].amount / 10000)
        this.custSortPayed2 = this.change6Decimals(data.data.custSortList[1].payed / 10000)
        this.custSortRate2 = this.numToPercent(data.data.custSortList[1].rate)
        // 客户排行榜第三名、总金额、回款率
        this.custSortName3 = data.data.custSortList[2].name
        this.custSortAmount3 = this.change6Decimals(data.data.custSortList[2].amount / 10000)
        this.custSortPayed3 = this.change6Decimals(data.data.custSortList[2].payed / 10000)
        this.custSortRate3 = this.numToPercent(data.data.custSortList[2].rate)
      })

      /**
       *获取在线、离线人数
       */
      net.send({
        server: this.server.getOnlineUsers
      }).then((data) => {
        this.onlineUsers = data.onlineUsers
      })

      /**
       * 获取系统公告
       */
      net.send({
        server: this.server.getBatchSysNotice
      }).then((data) => {
        this.title = data.title
        this.content = data.content
      })
    },
    computed: {
      /**
       * 保留六位小数
       */
      caseSumMoney6() {
        let caseSumAmt = this.caseSumAmt.toFixed(6)
        return caseSumAmt
      },
      caseSumAmtPerson6() {
        let caseSumAmtPerson = this.caseSumAmtPerson.toFixed(6)
        return caseSumAmtPerson
      },
      repaySumAmt6() {
        let repaySumAmt = this.repaySumAmt.toFixed(6)
        return repaySumAmt
      },
      repaySumAmtPerson6() {
        let repaySumAmtPerson = this.repaySumAmtPerson.toFixed(6)
        return repaySumAmtPerson
      }
    },
    methods: {
      onReady() {},
      onClick() {},
      /**
       * 保留6位小数
       */
      change6Decimals(amount) {
        return amount.toFixed(6)
      },
      /**
       * 小数转化为百分数
       */
      numToPercent(num) {
        var strData = parseFloat(num) * 10000
        strData = Math.round(strData)
        strData /= 100.00
        var ret = strData.toString() + '%'
        return ret
      }
    }
  }

</script>

<style scoped>
  @media screen and (min-width:1930px) {
    .rankDiv {
      width: 560px;
      height: 128px;
    }
  }

  .echarts {
    width: 400px;
    height: 400px;
  }

  .head {
    background: #ECEFF4;
    width: 100%;
    height: 102px;
    border-radius: 3px;
  }

  .iconfontType {
    font-size: 70px;
    position: absolute;
    top: 6px;
    right: 12px;
  }

  .caseMoney {
    background: #F7786C;
    margin-top: 8px;
    margin-left: 21px;
    width: 23%;
    border-radius: 3px;
    height: 86px;
    position: relative;
    text-align: left;
  }

  .backMoney {
    background: #64A9B5;
    margin-top: 8px;
    width: 23%;
    border-radius: 3px;
    height: 86px;
    position: relative;
    text-align: left;
  }

  .debtCollectorNum {
    background: #F1C781;
    margin-top: 8px;
    width: 23%;
    border-radius: 3px;
    height: 86px;
    position: relative;
  }

  .clientNum {
    background: #64C9A1;
    margin-top: 8px;
    margin-right: 21px;
    width: 23%;
    border-radius: 3px;
    height: 86px;
    position: relative;
  }

  .debtCollectorNum {
    float: left;
  }

  .histogram {
    height: 200px;
    margin-top: 18px;
  }

  .fontFootDiv {
    position: relative;
  }

  .fontFoot {
    width: 110px;
    height: 10px;
    background: #64B5F6;
    position: absolute;
    left: 12px;
    top: 30px
  }

  .rank {
    margin-top: 10px;
  }

  .debtColRank {
    width: 33%;
    float: left;
  }

  .clientRank {
    width: 33%;
    height: 210px;
    float: left;
  }

  .sysInfo {
    width: 33%;
    height: 210px;
    float: left;
  }

  .rankText {
    font-size: 18px;
    line-height: 18px;
    margin-top: 6px;
    margin-bottom: 2px;
    text-align: left;
    color: #28313E;
    font-family: 'MicrosoftYaHei';
    font-weight: 100;
  }

  .textFoot {
    width: 110px;
    height: 10px;
    margin-top: 6px;
    margin-bottom: 4px;
    background: #64B5F6;
  }

  .rankBackground {
    float: left;
    background: #ECEFF4;
    width: 362px;
    height: 264px;
  }

  .rankDiv {
    width: 350px;
    height: 80px;
    background: white;
    margin-left: 6px;
    margin-top: 6px;
    position: relative;
  }

  .head-portrait {
    height: 80px;
    width: 99px;
    margin-left: -18px;
    background-image: url('../../assets/images/head-portrait.png');
    background-repeat: no-repeat;
    background-position: center top;
    float: left;
    margin-top: 6px;
  }

  .name {
    width: 99px;
    margin-left: 0;
    margin-top: 50px;
    text-align: center;
    font-size: 18px;
    /*position: absolute;
    left: 60px;
    bottom: 2px*/
  }


  .rankPayed {
    text-align: left;
    font-size: 2px;
    color: #8C8C8C;
    position: absolute;
    left: 140px;
    top: 16px
  }

  .rankAmount {
    text-align: left;
    font-size: 2px;
    color: #8C8C8C;
    position: absolute;
    left: 140px;
    top: 32px
  }

  .rankRate {
    text-align: left;
    font-size: 2px;
    color: #8C8C8C;
    position: absolute;
    left: 140px;
    top: 48px
  }

  .batchStatus {
    text-align: left;
    font-size: 18px;
    position: absolute;
    left: 60px;
    top: 20px
  }

  .batchInfo {
    text-align: left;
    font-size: 2px;
    color: #8C8C8C;
    position: absolute;
    left: 60px;
    top: 45px
  }

  .rankNum1 {
    height: 45px;
    width: 45px;
    margin-left: 0px;
    margin-top: 0px;
    background-image: url('../../assets/images/num1.png');
    background-repeat: no-repeat;
    float: left;
  }

  .rankNum2 {
    height: 45px;
    width: 45px;
    margin-left: 0px;
    margin-top: 0px;
    background-image: url('../../assets/images/num2.png');
    background-repeat: no-repeat;
    float: left;
  }

  .rankNum3 {
    height: 45px;
    width: 45px;
    margin-left: 0px;
    margin-top: 0px;
    background-image: url('../../assets/images/num3.png');
    background-repeat: no-repeat;
    float: left;
  }

  .new {
    height: 45px;
    width: 45px;
    margin-left: 0px;
    margin-top: 0px;
    background-image: url('../../assets/images/new.png');
    background-repeat: no-repeat;
    float: left;
  }

  .white {
    color: white;
  }

</style>
